<template>
  <div>
    <van-grid :column-num="4" clickable>
      <van-grid-item
        :icon="item.icon"
        :key="item.name"
        :text="item.name"
        :to="item.path"
        v-for="item in functionList"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'Home',

  data() {
    return {
      functionList: [
        {
          name: '轮播图',
          icon: 'home-o',
          path: '/views/swiper/myIndex'
        },
        {
          name: '图表',
          icon: 'bar-chart-o',
          path: '../swiper/myIndex.vue'
        },
        {
          name: '富文本',
          icon: 'comment-o',
          path: '../swiper/myIndex.vue'
        },
        {
          name: '表单校验',
          icon: 'certificate',
          path: '/views/forms/validForm'
        },
        {
          name: '异步与同步',
          icon: 'exchange',
          path: '/views/async/index'
        },
        {
          name: 'OCR识别',
          icon: 'scan',
          path: '/views/ocr/index'
        },
        {
          name: 'vueStore',
          icon: 'shop-o',
          path: '/views/store/index'
        },
        {
          name: '图标',
          icon: 'star-o',
          path: '/views/icon/index'
        }
      ]
    }
  }
}
</script>

<style>
</style>